<template>
  <el-popover
    width="200"
    trigger="manual"
    v-model="visiblePopover"
  >
    <div class="account-seatch">
      <el-table
        :current-row-key="currentKey"
        v-loading.sync="searchLoad"
        class="info-popover-table"
        highlight-current-row
        @row-click="onSelect"
        :show-header="false"
        :data="gridData"
        row-key="id"
        ref="table"
      >
        <el-table-column
          show-overflow-tooltip
          label="患者名称"
          prop="name"
        />
      </el-table>
    </div>
    <span slot="reference" @click.stop>
      <div class="el-input el-input--small">
        <input
          @keyup.enter="onKeyupEnter"
          @keyup.down="onKeyupDown"
          placeholder="患者名称/手机号"
          class="el-input__inner"
          @keyup.up="onKeyupUp"
          ref="accountInput"
          @input="onChange"
          v-model="name"
          type="text"
        />
      </div>
    </span>
  </el-popover>
</template>
<script>
import { getUserList } from '@/api/registrationMessage/registrationMessage'

export default {
  name: "accountSearch",
  props: {
    value: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      visiblePopover: false,
      currentIndex: null,
      searchLoad: false,
      pharmacyId: null,
      currentKey: null,
      listener: null,
      gridData: [],
      name: null,
    };
  },
  created() {
    this.listener = () => {
      this._closePopover();
    };
    document.addEventListener("click", this.listener);
    this.$store.dispatch("GetInfo").then(res => {
      this.pharmacyId = res.pharmacyId;
    });
  },
  mounted() {
    this.name = this.value;
  },
  deactivated() {
    document.removeEventListener("click", this.listener);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.listener);
  },
  methods: {
    onChange() {
      if(this.timer) clearTimeout(this.timer);
      // 两次输入时间间隔500ms以上进行检索
      this.timer = setTimeout(() => {
        this.onSearch();
      }, 500);
      this.$emit("input", this.name);
    },
    onSearch() {
      if(this.name) {
        this.visiblePopover = true;
        this.searchLoad = true;
        this.currentIndex = null;
        this.currentKey = null;
        let data = {
          name: this.name,
          sort: 'asc',
        }
        getUserList(data).then(res => {
          this.searchLoad = false;
          this.gridData = res.content;
          if(this.gridData.length) {
            this.currentKey = this.gridData[0].id;
            this.currentIndex = 0;
          }
        });
      } else {
        this._closePopover();
      }
    },
    onSelect(row) {
      this.$emit("select", row);
      this._closePopover();
      this.name = row.name;
    },
    onKeyupDown() {
      if(!this.gridData || !this.gridData.length) return;
      if(this.currentIndex != null && this.currentIndex < this.gridData.length - 1) {
        this.currentIndex ++;
      } else {
        this.currentIndex = 0;
      }
      this.currentKey = this.gridData[this.currentIndex].id;
      if(this.currentIndex > 3) {
        this.$refs.table.bodyWrapper.scrollTop = (this.currentIndex - 2) * 50;
      } else {
        this.$refs.table.bodyWrapper.scrollTop = 0;
      }
    },
    onKeyupUp() {
      if(!this.gridData || !this.gridData.length) return;
      if(this.currentIndex != null && this.currentIndex > 0) {
        this.currentIndex --;
      } else {
        this.currentIndex = this.gridData.length - 1;
      }
      this.currentKey = this.gridData[this.currentIndex].id;
      if(this.currentIndex > 3) {
        this.$refs.table.bodyWrapper.scrollTop = (this.currentIndex) * 40;
      } else {
        this.$refs.table.bodyWrapper.scrollTop = 0;
      }
    },
    onKeyupEnter() {
      if(!this.gridData || !this.gridData.length) return;
      if(this.currentIndex != null) {
        this.onSelect(this.gridData[this.currentIndex]);
      }
    },
    _closePopover() {
      this.visiblePopover = false;
      this.gridData.splice(0, this.gridData.length + 1);
      this.currentIndex = null;
      this.currentKey = null;
    }
  }
}
</script>

<style>
.account-seatch .info-popover-table .el-table__body-wrapper {
  max-height: 160px;
  overflow-y: auto;
}
.account-seatch .el-table__body tr.current-row > td {
  background-color: #e8f4ff;
}
</style>